Unreal Webcam Fun

瀏覽器中影片的錄製、濾鏡

實作

這次實作需要先取得存取電腦攝影鏡頭的權限，之前的操作都是在本地端的瀏覽器上，這次必須要上到本地server來開發，首先透過node.js的npm 指令安裝browser-sync
```
 npm install
 npm start
```

取得client端裝置的聲音或影片輸入，像是麥克風或攝像頭

 function getVideo() {
     navigator.mediaDevices
         .getUserMedia({ video: true, audio: false })
         .then((localMediaStream) => {
             console.log(localMediaStream);
             video.src = window.URL.createObjectURL(localMediaStream);
             video.play();
         })
         .catch((err) => {
             console.error(`OH NO!!!`, err);
         });
 }

 getVideo();

監聽影片的canplay事件，並將影片嵌入到canvas上，設定每16毫秒渲染一次

 video.addEventListener("canplay", paintToCanvas);

 function paintToCanvas() {
     const width = video.videoWidth;
     const height = video.videoHeight;
     canvas.width = width;
     canvas.height = height;

     return setInterval(() => {
         ctx.drawImage(video, 0, 0, width, height);
         // take pixels out
         let pixels = ctx.getImageData(0, 0, width, height);
         pixels = greenScreen(pixels);
         // put them back
         ctx.putImageData(pixels, 0, 0);
     }, 16);
 }

增加紅色濾鏡，透過重組影片中每個pixel的顏色來達到效果

 function redEffect(pixels) {
     for (let i = 0; i < pixels.data.length; i += 4) {
         pixels.data[i + 0] = pixels.data[i + 0] + 100; // red
         pixels.data[i + 1] = pixels.data[i + 1] - 50; // green
         pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // blue
     }

     return pixels;
 }

增加RGB濾鏡

 function rgbSplit(pixels) {
     for (let i = 0; i < pixels.data.length; i += 4) {
         pixels.data[i - 150] = pixels.data[i + 0]; // red
         pixels.data[i + 500] = pixels.data[i + 1]; // green
         pixels.data[i - 550] = pixels.data[i + 2]; // blue
     }

     return pixels;
 }

依選擇的RGB配色調整濾鏡

 function greenScreen(pixels) {
     const levels = {};
     document.querySelectorAll(".rgb input").forEach((input) => {
         levels[input.name] = input.value;
     });

     for (i = 0; i < pixels.data.length; i = i + 4) {
         red = pixels.data[i + 0];
         green = pixels.data[i + 1];
         blue = pixels.data[i + 2];
         alpha = pixels.data[i + 3];

         if (
             red >= levels.rmin &&
             green >= levels.gmin &&
             blue >= levels.bmin &&
             red <= levels.rmax &&
             green <= levels.gmax &&
             blue <= levels.bmax
         ) {
             // take it out!
             pixels.data[i + 3] = 0;
         }
     }

     return pixels;
 }

browser-sync

BrowserSync（瀏覽器同步）是一個用於網頁開發的開源工具，它提供了許多強大的功能，以幫助開發人員更輕鬆地進行前端開發和測試。以下是 BrowserSync 的一些主要功能和用途：

自動重新加載： BrowserSync 可以自動重新加載網頁，每當你保存代碼變更時，它會自動刷新瀏覽器，以顯示最新的內容，這對於開發過程中的快速反饋非常有用。
多瀏覽器測試：你可以在不同的瀏覽器和設備上同步測試你的網站，這有助於確保你的網站在各種瀏覽器中正確運行。
同步滾動和點擊： BrowserSync 可以同步多個設備的滾動、點擊和表單輸入，以確保你的網站在各種設備上有一致的表現。
本地服務器： BrowserSync 可以作為一個本地開發服務器運行，並提供諸如路由、代理和SPA（單頁應用）支持等功能。這使你能夠更輕鬆地模擬後端 API。
代理：你可以設定代理以將請求代理到開發網站或應用的後端服務，這對於開發需要後端數據的應用非常有用。
自訂設定： BrowserSync 允許你通過配置文件自定義設定，以滿足特定項目的需求。
網絡測速：它提供了一個網絡測速工具，可用於評估你的網站性能，這有助於優化網站的加載速度。

總之，BrowserSync 是一個非常有用的前端開發工具，它可以提高開發速度，確保網站在各種瀏覽器和設備上的正確運行，並提供了許多有用的功能，使開發人員能夠更有效地進行前端開發和測試。

navigator

navigator 是 JavaScript 中的一個全局對象，它提供了有關用戶代理（User Agent）和瀏覽器的信息。通過 navigator 對象，你可以獲取有關瀏覽器的詳細信息，以便根據不同的瀏覽器和設備來調整你的網頁應用程序。以下是 navigator 對象的一些常見用途和功能：

檢測瀏覽器類型和版本：你可以使用 navigator.userAgent 屬性來獲取用戶代理字符串，然後通過解析此字符串來確定所使用的瀏覽器類型和版本。
檢測瀏覽器功能： navigator 對象提供了一些屬性和方法，用於檢測瀏覽器的功能，例如 navigator.cookieEnabled 用於檢查是否啟用了 cookies。
-地理位置信息：你可以使用 navigator.geolocation 對象來獲取用戶的地理位置信息，前提是用戶同意分享該信息。
瀏覽器語言和區域設置： navigator.language 和 navigator.languages 屬性可用於獲取瀏覽器的首選語言和區域設置。
瀏覽器存儲支持檢測：你可以使用 navigator.cookieEnabled、navigator.localStorage 和 navigator.sessionStorage 等屬性來檢測瀏覽器對 cookie、本地存儲和會話存儲的支持情況。
瀏覽器特定的功能：一些瀏覽器提供了特定的擴展，你可以使用 navigator 對象來檢測是否支持這些功能，例如 WebRTC、Service Workers 等。

總之，navigator 對象是 JavaScript 中用於獲取瀏覽器相關信息的重要工具，它使開發人員能夠根據不同的瀏覽器和設備進行適當的調整和優化，以確保網頁應用程序的正確運行。